<template>
  <div>
    <h1 class="text-red">我是远程加载的页面123</h1>
    <input v-model="input" placeholder="placeholder" @input="changeValue" />
    <button @click="emitParentFun">调用父组件的方法</button>
    <el-button type="primary">远程组件调用按钮</el-button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, onMounted } from "vue";

const props = defineProps(["modelValue"]);
// 更新model绑定的值固定写法: update:modelValue
const emit = defineEmits(["update:modelValue", "childClick"]);

let input = ref("");

onMounted(() => {
  input.value = props.modelValue;
  // window环境指向的是接收方的window环境
  console.log(window.testName);
});

const changeValue = (e) => {
  // 修改父组件的值
  emit("update:modelValue", e.target.value);
};

const emitParentFun = () => {
  emit("childClick", input.value);
};
</script>

<style scope>
.text-red {
  color: red;
}
</style>
